	
#translate,#rotate,#scale,#skew{
	 position: relative;
	 
}
#rotate{
	 
	
}
#translate>div,#rotate>div,#scale>div,#skew>div
{
	width:200px;
	height:200px;
	  background-image: url(../images/traimg1.jpg);
	  position: relative;
	 
}
#translate div#div2
{
	transform:translate(100px,-100px);
}
#box_exzample{
	height: 800px;
}
.point{
	height: 5px;
	width: 5px;
	background-color: #1f5768;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 9999;
	
}

	
#rotate div#div2,#scale div#div2{
	 background-color: rgba(63,49,17,0.5);
	 background-image: none;
	 position: absolute;	
	 top:0px;
	 left: 0px;
	 
}

#rotate div#div2
{
	 transform:rotate(45deg);
}
#scale>div
{
	width:100px;
	height:100px;
	 margin-left: 100px; 
	  position: relative;
	 
}
#scale div#div2
{
	top:100pxpx;
	left:100pxpx;
	 transform:scale(2,2);
}
#skew>div
{
	width:100px;
	height:100px;
	  
	  position: relative;
	 
}
#skew div#div2
{
	top:100pxpx;
	left:100pxpx;
	transform:skew(30deg,20deg);
}